@()(implicit request: play.api.mvc.RequestHeader)
@main("Multiple sequence alignment (Muscle)") {
	<link rel="stylesheet" media="screen" href="@routes.Assets.at("phylotree.js-master/phylotree.css")">
	<script src="@routes.Assets.at("javascripts/d3.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("phylotree.js-master/phylotree.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/underscore.min.js")" type="text/javascript"></script>


	<style>

			.fa-rotate-135 {
				-webkit-transform: rotate(135deg);
				-moz-transform: rotate(135deg);
				-ms-transform: rotate(135deg);
				-o-transform: rotate(135deg);
				transform: rotate(135deg);
			}

			.fa-rotate-45 {
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
			}

			.myGroup {
				margin-top: 15px;
				margin-left: 15px;
			}

	</style>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Multiple sequence alignment (Muscle)</h2>
		</div>
	</div>

	<form class="registration-form form-horizontal" id="form" accept-charset="UTF-8">

		<div class="form-group" >
			<label class="control-label col-sm-2">Enter FASTA sequences:</label>
			<div class="col-sm-8">
				<textarea class="form-control monospace" name="queryText" id="queryText" rows="7"
				></textarea>
				<span class="help-block">
					e.g.,&nbsp;<a href="javascript:void(0);"><em class="myShowExample" id="egQuery">
					example</em></a></span>
			</div>
		</div>

		<div class="form-group">
			<label class="control-label col-sm-2">Or, upload file:</label>
			<div class="col-sm-8">
				<input id="input-1" type="file" class="file control-label" name="file" data-show-preview="false"
				data-show-upload="false">
				<span class="help-block"><a class="myShowExampleFile"><em>
					Example file</em></a></span>
			</div>
		</div>

		<div class="form-group">
			<label class="control-label col-sm-2">Output Tree:</label>
			<div class="col-sm-3">
				<select id="tree" name="tree" class="form-control"> <option selected="selected" value="none">none</option>
					<option value="tree1">From first iteration</option>
					<option value="tree2">From second iteration</option> </select>
			</div>

		</div>


		<div class="form-group">
			<div class="actions col-sm-offset-2 col-sm-2">
				<button type="button" class="btn btn-primary myRun" style="width: 90%;" id="search" >
					Run</button>
			</div>
		</div>


	</form>
	<hr>
	<div id="result" style="display: none;">
		<h4>Result:</h4>
		<h5>Fasta result:
			&nbsp;<button class="btn btn-primary myDownloadFa" ><i class="fa fa-download"></i>&nbsp;Download</button>
		</h5>
		<pre id="out" style="background-color: white"></pre>
		<div id="treeContent">
			<h5>Tree result:
				&nbsp;<button class="btn btn-primary myDownloadTree" ><i class="fa fa-download"></i>&nbsp;Download</button>
			</h5>
			<pre id="treeOut" style="background-color: white"></pre>
			<h5>Tree plot:
				<form action="@routes.ToolsController.downloadTree()" method="post" class="mySubmit" style="display: inline">
					<input type="hidden" name="svgHtml" id="svgHtml">
						&nbsp;<button class="btn btn-primary" type="submit"><i class="fa fa-download"></i>&nbsp;Download</button>
				</form>
			</h5>
			<div style="border: 1px solid #ccc;">
				<div>
					<div class="btn-group myGroup">
						<button type="button" class="btn btn-default btn-sm" data-direction="vertical" data-amount="1" title="Expand vertical spacing">
							<i class="fa fa-arrows-v"></i>
						</button>
						<button type="button" class="btn btn-default btn-sm" data-direction="vertical" data-amount="-1" title="Compress vertical spacing">
							<i class="fa  fa-compress fa-rotate-135"></i>
						</button>
						<button id="leftRight" type="button" class="btn btn-default btn-sm" data-direction="horizontal" data-amount="1" title="Expand horizonal spacing">
							<i class="fa fa-arrows-h"></i>
						</button>
						<button type="button" class="btn btn-default btn-sm" data-direction="horizontal" data-amount="-1" title="Compress horizonal spacing">
							<i class="fa  fa-compress fa-rotate-45"></i>
						</button>
						<button type="button" class="btn btn-default btn-sm" id="sort_ascending" title="Sort deepest clades to the bototm">
							<i class="fa fa-sort-amount-asc"></i>
						</button>
						<button type="button" class="btn btn-default btn-sm" id="sort_descending" title="Sort deepsest clades to the top">
							<i class="fa fa-sort-amount-desc"></i>
						</button>
						<button type="button" class="btn btn-default btn-sm" id="sort_original" title="Restore original order">
							<i class="fa fa-sort"></i>
						</button>
					</div>
					<div class="btn-group myGroup" data-toggle="buttons">
						<label class="btn btn-default btn-sm active" id="linear">
							<input name="options" class="phylotree-layout-mode" data-mode="linear" autocomplete="off" checked="" title="Layout left-to-right" type="radio">
							Linear
						</label>
						<label class="btn btn-default  btn-sm">
							<input name="options" class="phylotree-layout-mode" data-mode="radial" autocomplete="off" title="Layout radially" type="radio">
							Radial
						</label>
					</div>
					<div class="btn-group myGroup" data-toggle="buttons">
						<label class="btn btn-default active btn-sm" id="defaultAlign">
							<input class="phylotree-align-toggler" data-align="left" name="options-align" autocomplete="off" checked="" title="Align tips labels to branches" type="radio">
							<i class="fa fa-align-left"></i>
						</label>
						<label class="btn btn-default btn-sm">
							<input class="phylotree-align-toggler" data-align="right" name="options-align" autocomplete="off" title="Align tips labels to the edge of the plot" type="radio">
							<i class="fa fa-align-right"></i>

						</label>
					</div>
				</div>

				<svg id="tree_display" xmlns='http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
			</div>
		</div>
	</div>


	<script>

			$(function () {

				Muscle.init

			})

	</script>
}
